
const path = require('path') // 路径
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 解析html
const { VueLoaderPlugin } = require('vue-loader') // 解析vue文件下面的js css
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // css单独文件

const { 
    CleanWebpackPlugin 
} = require('clean-webpack-plugin') // 大包前清理

// 相对路径转换绝对路径
const resolvePath = _path => path.resolve(__dirname,_path)

const baseConfig = {
    entry:resolvePath('../src/main.js'),// 入口
    output:{ 
        path:resolvePath('../dist'), //必须是绝对路径
        filename:'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': path.resolve('src'),
        }
    },
    module:{ // 模块
        rules:[
            {
                test:/\.vue$/,
                use:'vue-loader'
            },
            {
               test:/\.s?css$/,
               use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader',
               {
                loader: 'sass-resources-loader',
                options: {
                    resources: resolvePath('../src/assets/css/index.scss')
                }
              }] // 从右至左
            },
            {
                test:/\.m?js$/,
                 use:{
                     loader:'babel-loader',
                     options:{
                         presets:['@babel/preset-env'],
                     }
                 }       
            },
            // { // 老写法
            //     test:/\.(png)|(jpe?g)|(svg)$/,
            //     use:{
            //         loader:'file-loader',
            //         options:{esModule:false}
            //     }
            // },
            { // 新写法
                test:/\.(png)|(jpe?g)|(svg)$/,
                type:'asset/resource'
            }
        ]
    },
    plugins:[ // 插件
    new HtmlWebpackPlugin({
        template:resolvePath('../public/index.html'),
        filename: 'index.html',
        title:'vue2',
    }),
    new MiniCssExtractPlugin({
        filename:'[name].[hash:8].css'
    }),
        new VueLoaderPlugin(), // 解析vue文件下面的js css
        new CleanWebpackPlugin() // 打包前清理
    ],
}

module.exports = {
    resolvePath,
    baseConfig
}